<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-swiper
					:list="list"
					:current="current1"
					@onChange="onChange1"
				>
				</pure-swiper>
			</pj-demo>

			<!-- 显示数量 -->
			<pj-demo title="显示数量">
				<pure-swiper
					:list="list"
					:current="current2"
					:displayMultipleItems="2"
					height="211rpx"
					gap="10px"
					@onChange="onChange2"
				>
				</pure-swiper>
			</pj-demo>

			<!-- 异形轮播图 -->
			<pj-demo title="异形轮播图">
				<pure-swiper
					:list="list"
					:current="current3"
					height="360rpx"
					gap="10px"
					scale="0.88"
					previous-margin="50px"
					next-margin="50px"
					circular
					@onChange="onChange3"
				>
				</pure-swiper>
			</pj-demo>

			<!-- 异形轮播图 -->
			<pj-demo title="异形轮播图">
				<pure-swiper
					:list="list"
					:current="current4"
					height="360rpx"
					gap="10px"
					scale="0.8"
					previous-margin="50px"
					next-margin="50px"
					circular
					:displayMultipleItems="2"
					@onChange="onChange4"
				>
				</pure-swiper>
			</pj-demo>

			<!-- 指示器 -->
			<pj-demo title="指示器">
				<pure-swiper
					indicator
					:list="list"
					:current="current5"
					@onChange="onChange5"
					indicatorMode="bar"
				>
				</pure-swiper>
			</pj-demo>

			<!-- 指示器显示在下方 -->
			<pj-demo title="显示在下方">
				<pure-swiper
					indicator
					indicatorOutside
					:list="list"
					:current="current7"
					@onChange="onChange7"
				>
				</pure-swiper>
			</pj-demo>

			<!-- 切换器 -->
			<pj-demo title="切换器">
				<pure-swiper
					progresor
					:list="list"
					:current="current6"
					@onChange="onChange6"
				>
				</pure-swiper>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	// 列表数据
	const list = ref([
		{ src: "/static/images/w_9.jpeg", title: "看这只大象大不大" },
		{ src: "/static/images/w_2.jpeg", title: "这只大象有点大" },
		{ src: "/static/images/w_3.jpeg", title: "看这只大象红不红" },
		{ src: "/static/images/w_4.jpeg", title: "这只大象有点红" },
		{ src: "/static/images/w_5.jpeg", title: "大象有点大丶" }
	]);

	const current1 = ref(0);
	const current2 = ref(0);
	const current3 = ref(0);
	const current4 = ref(0);
	const current5 = ref(0);
	const current6 = ref(0);
	const current7 = ref(0);

	// 切换事件
	function onChange1(e) {
		current1.value = e.detail.current;
	}

	// 切换事件
	function onChange2(e) {
		current2.value = e.detail.current;
	}

	// 切换事件
	function onChange3(e) {
		current3.value = e.detail.current;
	}

	// 切换事件
	function onChange4(e) {
		current4.value = e.detail.current;
	}

	// 切换事件
	function onChange5(e) {
		current5.value = e.detail.current;
	}

	// 切换事件
	function onChange6(e) {
		current6.value = e.detail.current;
	}

	// 切换事件
	function onChange7(e) {
		current7.value = e.detail.current;
	}
</script>

<style lang="scss" scoped></style>
